<!-- 简易弹窗 -->

<template>
  <el-dialog v-bind="config" :visible.sync="model">
    <!-- 标题插槽 -->
    <template #title>
      <slot name="title" :title="title" />
    </template>

    <!-- 页签插槽 -->
    <div v-if="hasTab" class="CoreWeb-Modal-tab">
      <slot name="tab" />
    </div>

    <!-- 默认插槽 -->
    <div class="CoreWeb-Modal-body">
      <slot />
    </div>

    <!-- 底部插槽 -->
    <template v-if="!noFooter" #footer>
      <el-button v-show="!noCancel" class="CoreWeb-Modal-canel" v-bind="cancelBtn" @click="toClose">
        {{ cancel }}
      </el-button>
      <slot name="footer">
        <el-button v-show="!noConfirm" type="primary" v-bind="confirmBtn" @click="toSubmit">{{ confirm }}</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import WebForm from '../WebForm'

const name = 'EasyModal'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 模型绑定
   */
  model: {
    prop: 'visible', // 与 props 里的名称一致
    event: 'close', // 回传调用的事件名称
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 样式类
     */
    className: mixPath.computed.className,

    /**
     * 尺寸
     */
    size: WebForm.computed.size,

    /**
     * 是否有页签
     */
    hasTab() {
      if (!this.$scopedSlots) return false
      return this.$scopedSlots.tab
    },

    /**
     * 显示弹窗 (双向绑定)
     */
    model: {
      get() {
        return this.visible
      },
      set() {
        this.toClose()
      },
    },

    /**
     * 弹窗配置
     */
    config() {
      const {
        width,
        fullWide,
        fullWidth,
        fullHigh,
        fullScreen,
        top,
        title,
        center,
        className,
        modalClass,
        size,
        large,
        huge,
      } = this

      const modalWidth = CORE.isInt(width) ? `${width}px` : width
      const fullModalWidth = CORE.isInt(fullWidth) ? `${fullWidth}px` : fullWidth
      const modalTop = CORE.isInt(top) ? `${top}px` : top
      const finalWidth = modalWidth || (fullWide ? fullModalWidth : null)
      const sizeStr = finalWidth || fullScreen ? 'width' : size || (huge ? 'huge' : large ? 'large' : 'default')
      const wideClass = fullWide ? ` ${className}-fullWide` : ''
      const highClass = fullHigh ? ` ${className}-fullHigh` : ''

      return {
        ...this.elProps,
        width: finalWidth,
        closeOnClickModal: this.bgClose,
        title,
        top: modalTop,
        center,
        fullscreen: fullScreen,
        customClass: `${className} ${className}-${sizeStr}${wideClass}${highClass} ${modalClass}`,
        appendToBody: true,
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听弹窗可见
     */
    model: {
      immediate: true,
      handler(model) {
        model && CORE.iframeNotice(true) // 如果当前是 iframe 中的页面，则通知父层升降该 iframe 的 z-index
      },
    },
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    if (this.model) this.toClose()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击确定
     */
    toClose() {
      this.$emit('close', false)
      CORE.iframeNotice(false) // 如果当前是 iframe 中的页面，则通知父层升降该 iframe 的 z-index
    },

    /**
     * 点击确定
     */
    toSubmit() {
      this.$emit('submit')
    },
  },
}
</script>
